<template>
    <view>
        <view class="margin-base bg-white padding-tb-2xl radius-2xl padding-lr-base">
            <view class="margin-bottom-lg">
                <aconutInput v-model="account" title="手机号" placeholder="请输入手机号" />
            </view>
            <view>
                <codeInput v-model="code" :mobile="account" type="bind" />
            </view>
        </view>

        <view class="margin-lr-base" style="margin-top: 50rpx">
            <button @click="submit" class="bg-main round text-lg">提 交</button>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import aconutInput from "@/components/input/acount-input.vue";
import codeInput from "@/components/input/code-input.vue";
import { useMemberStore } from "@/store/module/member";
import { useTask } from "@/utils/message";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { validationMobile } from '@/utils/validation';

const memberStore = useMemberStore();
const account = ref<string>(memberStore.userInfo.mobile || "");
const code = ref<string>("");

const submit = () => {
  if (!account.value) {
    useTask("请输入手机号码");
    return;
  }

  if (!validationMobile(account.value)) {
    useTask("请输入正确的手机号码");
    return;
  }

  if (!code.value) {
    useTask("请输入验证码");
    return;
  }

  memberStore.setMobile({
    username: memberStore.userInfo.username,
    mobile: account.value,
    code: code.value
  })
};
</script>

<style lang="scss" scoped></style>
